<!DOCTYPE html>  
<html lang="zh-CN">  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>我的网页</title>  
    <link rel="stylesheet" href="styles.css">  
    <style>
        /* 基本样式 */  
body {  
    font-family: Arial, sans-serif;  
    margin: 0;  
    padding: 0;  
    display: flex;  
    flex-direction: column;  
    min-height: 100vh;  
}  
  
header, footer {  
    background-color: #f4f4f4;  
    padding: 10px 20px;  
    text-align: center;  
}  
  
nav ul {  
    list-style: none;  
    padding: 0;  
}  
  
nav ul li {  
    display: inline;  
    margin-right: 10px;  
}  
  
nav ul li a {  
    text-decoration: none;  
    color: #333;  
}  
  
main {  
    flex: 1; /* 使main部分填充剩余空间 */  
    padding: 20px;  
}  
  
aside {  
    background-color: #e9ebee;  
    padding: 20px;  
    /* 在小屏幕上隐藏侧边栏 */  
    display: none;  
}  
  
  
/* 可以继续添加更多样式 */
    </style>
</head>  
<body>  
    <header>  
        <h1>我的网站</h1>  
        <nav>  
            <ul>  
                <li><a href="#">首页</a></li>  
                <li><a href="#">关于</a></li>  
                <li><a href="#">服务</a></li>  
                <li><a href="#">联系</a></li>  
            </ul>  
        </nav>  
    </header>  
    <main>  
        <section>  
            <h2>文章标题</h2>  
            <p>这是一篇关于网页布局的文章，介绍了如何构建现代网页的基本结构。</p>  
        </section>  
        <!-- 可以添加更多section或其他内容 -->  
    </main>  
    <aside>  
        <h3>侧边栏</h3>  
        <p>这里是侧边栏内容，可能包含广告、相关文章等。</p>  
    </aside>  
    <footer>  
        <p>版权所有 &copy; 2023 我的网站</p>  
    </footer>  
</body>  
</html>